<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<script src="js/jquery-1.11.1.js"></script>
		<!--  0._元素内容操作：操作元素和元素内容的方式
		html()         无参  ----功能：获取匹配元素集合中第一个元素
		               有参  ----功能：获取匹配元素集合中所有元素并替换
		 val()         无参  ----功能：针对表单元素：input，select。。。
		                              获取第一个表单元素的值【value】
					    有参  ----功能：针对表单元素：input，select。。。
						设置表单元素的值，input直接设置
			特点：设置表单元素+内容，下拉列表智能添加存在value值
		text()          无参--获取匹配元素集合中所有元素的文本内容
		                有参--设置  获取匹配元素集合中所有元素文本内容替换
		                              
									                  select不能直接设置，设置原有value
		
		 -->
	</head>
	<body>
		<button>html()函数 有参 </button>
		<span>lorem1</span>
		<span>lorem2</span>
		<h1>val()函数的使用</h1>
		<button>val()函数 无参</button>
		<input type="text" value="真实数据1"/>
		<input type="text" value="真实数据2" placeholder="文本框提示"/>
		<!-- html： 按钮 .btn2 select>option*3
		     jq:    点击按钮，显示第一个表单元素的值
			 -->
			 <br>
			 <button class="btn2">val()函数【select】 无参</button>
			 <select>
				 <!-- option包裹用户显示数据，option属性value真实的数据 -->
				 <option value="rem1"></option>
				 <option value="rem2"></option>
				 <option value="rem3"></option>
			 </select>
			 <p>lorem4</p>
			 <p>lorem5</p>
			 <p>lorem6</p>
		<script>
			//抓到无参按钮，点击，打印p的text值
			$("btn4").click(function(){
				var ptext=$("p").text();
				alert(ptext);
			});
			//抓到有参按钮，点击，改变p中文本的内容：改变效果
			$("btn5").click(function(){
				$("p").text("改变效果");
			});
			// $("#btn3").click(function(){
			// 	/* 下拉列表  抓select元素 */
			// 	var vals=$("select").val("rem1");
			// 	alert("val() 函数针对下拉列表"+vals)
			// });
			
			// $("#btn2").click(function(){
			// 	/* 下拉列表  抓select元素 */
			// 	var vals=$("select").val();
			// 	alert("val() 函数针对下拉列表"+vals)
			// });
			
			/* $(".btn1").click(function(){
				// 变量名不允许使用关键字  js中关键字 for  in  遍历数组
				var in=("input").val();
				alert("val()针对input元素 无参："+ins);
			}); */
			
			
			
			//按钮，带年纪按钮，实现span内容 改成Lorem lorem
			$("button").click(function(){
				$("span").html("<marquee>lorem</marquee>");
			});
			/* 变量    js变量--jq
			   int i=1; java写法 强类型语言
			   var i=数值，元素; JavaScript 弱类型语言
			 */
			var html=$("span").html();
		</script>
	</body>
</html>